<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" title="股东/合伙人" placeholder bgColor="transparent"></u-navbar>
    <view class="search-box">
      <u-search v-model="searchVal" searchIconColor="#3ec1ba" :inputStyle="{borderRadius: '16rpx'}" shape="square"
        bgColor="#fff" height="76rpx" placeholder="请输入" :showAction="false" @search="search" @clear="search" />
      <u-checkbox-group v-model="statusFlag" placement="column" @change="statusChange"
        activeColor="#fff" iconColor="#2b8e88">
        <u-checkbox label="仅显示在册" name="在册" labelColor="#fff" />
      </u-checkbox-group>
    </view>
    <view class="list">
      <view class="list-item" v-for="item in investorList" :key="item.id">
        <image class="status" src="https://gowork365.com/prod-api/profile/mini/company/status1.png" v-if="item.status == '在册'" />
        <image class="status" src="https://gowork365.com/prod-api/profile/mini/company/status2.png" v-else />
        <view class="info">
          <view class="title u-line-1">{{ item.investorName }}</view>
          <view class="time">{{ item.contact }} {{ item.phoneNumber }}</view>
        </view>
        <view class="actions">
          <view class="actions-item" style="background: #FFDFE5;color: #FE748B;" @click="handleDelete(item.id)">
            <image src="https://gowork365.com/prod-api/profile/mini/company/action5.png" />
            <text>删除</text>
          </view>
          <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="jumpTo('/other/company/investorEdit', {id: item.id})">
            <image src="https://gowork365.com/prod-api/profile/mini/company/action6.png" />
            <text>编辑</text>
          </view>
          <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="jumpTo('/other/company/investorForm', {id: item.id})">
            <image src="https://gowork365.com/prod-api/profile/mini/company/action2.png" />
            <text>查看</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="investorList.length == 0" class="a-empty"><a-empty></a-empty></view>
    <view class="footer-primary-btn" @click="jumpTo('/other/company/investorEdit')">新增股东/合伙人</view>
	</view>
</template>

<script>
import { listInvestor, delInvestor } from '@/api/index'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      searchVal: '',
      statusFlag: ['在册'],
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      investorList: [],
    }
  },
  onShow() {
    this.search()
  },
  methods: {
    getList() {
      uni.showLoading({ mask: true })
      listInvestor({...this.page, status: this.statusFlag.length?'在册':'历史'}).then(response => {
        uni.hideLoading()
        this.investorList = [...this.investorList, ...response.rows];
        this.total = response.total;
      });
    },
    search() {
      this.page.pageNum = 1
      this.investorList = []
      this.getList()
    },
    statusChange(e) {
      this.statusFlag = e
      this.search()
    },
    handleDelete(id) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '删除后不可恢复，是否确认删除？',
        success: async function (res) {
          if (res.confirm) {
            await delInvestor(id)
            uni.showToast({
              icon: 'none',
              title: '删除成功',
            })
            that.search();
          }
        }
      });
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .search-box {
    width: 686rpx;
    margin: 48rpx auto 82rpx;
    display: flex;
    align-items: center;
    gap: 36rpx;
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    .list-item {
      margin-bottom: 32rpx;
      width: 686rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
      border-radius: 16rpx;
      padding: 48rpx 32rpx 40rpx;
      position: relative;
      .status {
        position: absolute;
        top: 0;
        right: 0;
        width: 96rpx;
        height: 44rpx;
      }
      .info {
        height: 138rpx;
        margin-bottom: 48rpx;
        .title {
          font-size: 28rpx;
          color: rgba(0,0,0,0.85);
          margin-bottom: 16rpx;
        }
        .time {
          font-size: 24rpx;
          color: rgba(0,0,0,0.25);
        }
      }
      .actions {
        display: flex;
        gap: 24rpx;
        .actions-item {
          flex: 1;
          height: 76rpx;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
}
</style>
